<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-07 11:29:54
-->
<template>
  <!--1. 容器 -->
  <div ref="Right2_container" id="container3" style="height: 95%"></div>
</template>
<script>
  //引入折线构造函数
import { Gauge } from '@antv/g2plot';
  export default{
   data(){
      return{
         dataArr:[]}
   },
   created(){

   },
   mounted(){
    this.initChart()   },
   methods:{
     //创建一个折线图实例对象
     initChart(){const gauge = new Gauge('container3', {
  percent: 0.75,
  range: {
    color: '#30BF78',
  },
  indicator: {
    pointer: {
      style: {
        stroke: '#D0D0D0',
      },
    },
    pin: {
      style: {
        stroke: '#D0D0D0',
      },
    },
  },
  axis: {
    label: {
      formatter(v) {
        return Number(v) * 100;
      },
    },
    subTickLine: {
      count: 3,
    },
  },
  statistic: {
    content: {
      formatter: ({ percent }) => `Rate: ${(percent * 100).toFixed(0)}%`,
      style: {
        color: 'rgba(0,0,0,0.65)',
        fontSize: 13,
      },
    },
  },
});

gauge.render();


     }
   }
  }
</script>
<style scoped>

</style>